<style scoped>
	.home_body {
		width: 80%;
		margin: 100px auto 100px;
	}
	.com_between:hover{
		background:#f9f8ff;
		cursor: pointer;
	}
	.com_between button.btn{
		width:250px;
	}
	.com_between .left .icon{
		width:auto;
		font-size:60px;
		color:#bbb;
	}
	@media (max-width: 768px) {
		.home_body {
			width: 95%;
		}
	}
</style>
<div class="com_content home_body" id="home_body" v-cloak>
	<div class="com_title">
		<div class="h1">应用列表</div>
		<div class="right">
			<button class="btn btn-main" @click="addsystem">+添加应用</button>
		</div>
	</div>
	<div v-if="isLoadend && datalist.length">
		<div class="com_block com_between mt50" v-for="item in datalist" @click="selectSystem(2,item)">
			<div class="left">
				<span v-if="item.type=='wx'" class="icon iconfont">&#xe65b;</span>
				<span v-if="item.type=='web'" class="icon iconfont">&#xe6fc;</span>
				<div class="h1 mt10">{{item.type|systemType}}</div>
			</div>
			<div class="right">
				<div class="item">
					<span class="l"><span class="icon"></span>应用名称：</span>
					<span class="r lightcolor">{{item.system_name}}</span>
				</div>
				<div class="item" v-if="item.type=='web'">
					<span class="l"><span class="icon"></span>应用链接：</span>
					<span class="r lightcolor">{{item.system_domain}}</span>
				</div>
				<div class="item">
					<span class="l"><span class="icon"></span>appId：</span>
					<span class="r lightcolor">{{item.app_id}}</span>
				</div>
				<div class="item">
					<span class="l"><span class="icon"></span>是否开启项目统计：</span>
					<span class="r lightcolor">{{item.is_use==0?'是':'否'}}</span>
				</div>
				<table class="table mt20">
					<tr class="light_color">
						<th class="tc" v-if="item.type=='web'">页面加载阀值</th>
						<th class="tc" v-if="item.type=='web'">JS资源阀值</th>
						<th class="tc" v-if="item.type=='web'">CSS资源阀值</th>
						<th class="tc" v-if="item.type=='web'">IMG资源阀值</th>
						<th class="tc">AJAX加载阀值</th>
						<th class="tc" v-if="item.type=='web'">是否统计页面性能</th>
						<th class="tc">是否统计AJAX性能</th>
						<th class="tc" v-if="item.type=='web'">是否统计页面资源性能</th>
						<th class="tc">是否统计用户系统信息</th>
						<th class="tc">是否统计错误信息</th>
					</tr>
					<tr>
						<td class="tc" v-if="item.type=='web'">{{item.slow_page_time}}s</td>
						<td class="tc" v-if="item.type=='web'">{{item.slow_js_time}}s</td>
						<td class="tc" v-if="item.type=='web'">{{item.slow_css_time}}s</td>
						<td class="tc" v-if="item.type=='web'">{{item.slow_img_time}}s</td>
						<td class="tc">{{item.slow_ajax_time}}s</td>
						<td class="tc" v-if="item.type=='web'">{{item.is_statisi_pages==0?'是':'否'}}</td>
						<td class="tc">{{item.is_statisi_ajax==0?'是':'否'}}</td>
						<td class="tc" v-if="item.type=='web'">{{item.is_statisi_resource==0?'是':'否'}}</td>
						<td class="tc">{{item.is_statisi_system==0?'是':'否'}}</td>
						<td class="tc">{{item.is_statisi_error==0?'是':'否'}}</td>
					</tr>
				</table>
				<div>
					<button class="btn mt30 mr20 btn-default" @click.stop="selectSystem(1,item)">设置</button>
					<button class="btn mt10 btn-main" @click="selectSystem(2,item)">进入</button>
				</div>
			</div>
		</div>
	</div>
	<div v-if="isLoadend && !datalist.length" class="empty mt30 tc">暂无数据！</div>
</div>
<script>
	new Vue({
		el: '#home_body',
		data: function () {
			return {
				token:'',
				datalist:[],
				userMsg:{},
				isLoadend:false,
			}
		},
		filters: {
			systemType: window.Filter.systemType,
		},
		mounted() {
			const userMsg = util.getStorage('local', 'userMsg');
			this.userMsg = userMsg ? JSON.parse(userMsg) : {};
			this.token = this.userMsg.token;
			this.getMsgForUserId();
		},
		methods: {
			getMsgForUserId() {
				util.ajax({
					type:'get',
					url: config.baseApi + 'trac/v1/system/getSysForUserId?token=' + this.token,
					success:  (data) => {
						this.isLoadend = true;
						if(data.data && data.data.length){
							this.datalist = data.data;
						}
					}
				})
			},
			addsystem() {
				location.href = `/selectype`
			},
			selectSystem(type,item){
				if(type===1 && item.type==='web'){
					location.href = '/web/setting';	
				}else if(type === 2 && item.type === 'web'){
					location.href = '/web/home';	
				}else if(type === 1 && item.type === 'wx'){
					location.href = '/wx/setting';	
				}else if (type === 2 && item.type === 'wx') {
					location.href = '/wx/home';	
				}	
				util.setStorage('local','appId',item.app_id)
			}
		},
	})
</script>